<template>
  <div :class="{ hidden: hidden }" class="pagination-container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :pager-count="pagerCount"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { scrollTo } from "@/utils/scroll-to";

const props = defineProps({
  total: {
    required: true,
    type: Number,
  },
  page: {
    type: Number,
    default: 1,
  },
  limit: {
    type: Number,
    default: 20,
  },
  pageSizes: {
    type: Array,
    default() {
      return [10, 20, 30, 50];
    },
  },
  // 移动端页码按钮的数量端默认值5
  pagerCount: {
    type: Number,
    default: document.body.clientWidth < 992 ? 5 : 7,
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
    // default: "total, sizes, prev, pager, next, jumper",
  },
  background: {
    type: Boolean,
    default: true,
  },
  autoScroll: {
    type: Boolean,
    default: true,
  },
  hidden: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
const currentPage = computed({
  get() {
    return props.page;
  },
  set(val) {
    emit("update:page", val);
  },
});
const pageSize = computed({
  get() {
    return props.limit;
  },
  set(val) {
    emit("update:limit", val);
  },
});
function handleSizeChange(val) {
  if (currentPage.value * val > props.total) {
    currentPage.value = 1;
  }
  emit("pagination", { page: currentPage.value, limit: val });
  if (props.autoScroll) {
    scrollTo(0, 800);
  }
}
function handleCurrentChange(val) {
  emit("pagination", { page: val, limit: pageSize.value });
  if (props.autoScroll) {
    scrollTo(0, 800);
  }
}
</script>

<style scoped>
/* 自定义分页样式 */
:deep(.custom-pagination) {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 14px;

  /* 总条数样式 */
  .el-pagination__total {
    order: 1;
    margin-right: 16px;
    font-weight: normal;
  }

  /* 页码容器 */
  .el-pager {
    order: 2;
    margin: 0 16px;

    .number {
      min-width: 28px;
      height: 28px;
      line-height: 28px;
      margin: 0 2px;
      border-radius: 4px;
      background: transparent;
      color: #606266;
      font-weight: normal;

      &.active {
        color: #409eff;
        background: transparent;
        font-weight: 500;
      }

      &:hover {
        color: #409eff;
      }
    }
  }

  /* 每页条数选择器 */
  .el-pagination__sizes {
    order: 3;
    margin-left: 0;

    .el-input {
      width: 110px;

      .el-input__wrapper {
        padding: 0 10px;
        box-shadow: 0 0 0 1px #dcdfe6 inset;

        &:hover {
          box-shadow: 0 0 0 1px #c0c4cc inset;
        }
      }

      .el-select__caret {
        color: #c0c4cc;
      }
    }
  }

  /* 移除默认功能按钮 */
  .btn-prev,
  .btn-next,
  .el-pagination__jump {
    display: none;
  }
}
</style>
